<script setup>
import xiaoVideo from '/components/xiao-video-component/xiao-video-component.vue'
import { ref, nextTick, onMounted } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'

// 影片信息
const movieInfo = ref(null)
// 分集
const movieUrl = ref([])
// 正在播放的集数
const numberIndex = ref(0)
// 正在播放的视频地址
const showUrl = ref(null)
let loadModal = ref(true)

const saveHistory = () => {
    let history = JSON.parse(uni.getStorageSync('history') || '[]')
    const currentMovie = {
        movieId: movieInfo.value.movieId,
        numberIndex: numberIndex.value,
        number: movieUrl.value[numberIndex.value].number, // 保存 number
        movieInfo: movieInfo.value
    }

    // 移除已存在的记录
    history = history.filter(item => item.movieId !== currentMovie.movieId)
    // 添加到数组末尾
    history.push(currentMovie)
    uni.setStorageSync('history', JSON.stringify(history))
}

onLoad(async (options) => {
    const db = uniCloud.database()
    const res = await db.collection('movies').where({
        movieId: parseInt(options.id)
    }).get()
    console.log(options.id)
    console.log(res)
    movieInfo.value = res.result.data[0]
    // 将url提取出来
    if (movieInfo) {
        const oldUrl = movieInfo.value.url
        const arr = oldUrl.split('#')
        arr.forEach(item => {
            const parts = item.split('$')
            const obj = {
                number: parts[0],
                url: parts[1]
            }
            movieUrl.value.push(obj)
        })
        
        // 检查历史记录
        let history = JSON.parse(uni.getStorageSync('history') || '[]')
        const savedMovie = history.find(item => item.movieId === movieInfo.value.movieId)
        if (savedMovie) {
            numberIndex.value = savedMovie.numberIndex
            showUrl.value = movieUrl.value[numberIndex.value].url
        } else {
            numberIndex.value = 0
            showUrl.value = movieUrl.value[0].url
        }
        loadModal.value = false

        // 保存到历史记录
        saveHistory()
    }
})

// 点击集数
const numberClick = (url, index) => {
    showUrl.value = url
    numberIndex.value = index
    saveHistory()
}

// 返回上一页的函数
const back = () => {
    uni.navigateBack({
        delta: 1
    })
}
</script>



<template>
	<view class="cu-load load-modal" v-if="loadModal">
		<view class="cuIcon-search text-drab"></view>
		<view class="gray-text">加载中...</view>
	</view>
	<view v-else>
		<!-- 播放器 -->
		<xiao-video :src="showUrl"></xiao-video>
		<view class="padding bg-white">
			<!-- 影片详情 -->
			<view class="detail">
				<view class="detail-info">
					<view class="left">
						<view class="title">{{movieInfo.nm}}</view>
						<view class="score">{{movieInfo.score}}分</view>
						<view class="info">{{movieInfo.area}} {{movieInfo.year}} {{movieInfo.cat}}</view>
					</view>
				</view>
				<view class="introduction">
					<text>{{movieInfo.intro}}</text>
				</view>
			</view>
			<!-- 影片选集 -->
			<view class="number">
				<view class="number-hd">选集</view>
				<view class="number-bd">
					<scroll-view scroll-x="true" class="scroll-view">
						<view 
						  v-for="(item,index) in movieUrl" 
						  :key="item.number" 
						  class="number-bd-item"
						  :class="numberIndex == index ? 'active' : ''" 
						  @tap="numberClick(item.url,index)"
						>
							{{item.number}}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.detail {
		.warning {
			text-align: center;
			color: #d81e06;
			background-color: #D0D0D0;
		}

		.detail-info {
			display: flex;
			margin-top: 20rpx;

			.left {
				flex: 500rpx;

				.title {
					display: inline-block;
					font-size: 32rpx;
					font-weight: 700;
					color: #434343;
				}

				.score {
					display: inline-block;
					padding: 0 20rpx;
					font-size: 24rpx;
					color: #f1c40f;
				}

				.info {
					font-size: 24rpx;
					color: #9e9e9e;
					padding-top: 10rpx;
				}
			}

			.right {
				position: relative;
				flex: 1;

				.right-collect {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
				}
			}
		}

		.introduction {
			font-size: 24rpx;
			color: #D0D0D0;
			padding: 20rpx 0;
			text-indent: 2em;
		}
	}

	.number {
		padding: 20rpx 0;
		border-top: 1rpx dotted #eee;
		border-bottom: 1rpx dotted #eee;

		.number-hd {
			font-size: 32rpx;
			font-weight: 700;
		}

		.number-bd {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.scroll-view {
				width: 100%;
				overflow: hidden;
				white-space: nowrap;

				.number-bd-item {
					display: inline-block;
					flex: 1;
					color: #fff;
					font-size: 24rpx;
					background-color: #000;
					padding: 20rpx;
					margin-right: 20rpx;
				}

				.active {
					color: #f1c40f;
				}
			}
		}
	}
</style>